<template>
  <div v-loading="loading" class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-tabs value="first">
          <el-tab-pane label="组织结构" name="first" class="tree-card">
            <tree-node :node-data="company" :is-root="true" />
            <hr>
            <el-tree :data="departments" default-expand-all>
              <template v-slot="{ data }">
                <tree-node
                  :node-data="data"
                  @getDept="getDeptList"
                  @add="addDept"
                />
              </template> </el-tree></el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
    <add-dept :show-dialog="showDialog" @close="showDialog = false" />
  </div>
</template>

<script>
import { getDept } from '@/api/department'
import { list2Tree } from '@/utils/index'
import TreeNode from './components/TreeNode'
import AddDept from './components/AddDept'
export default {
  name: 'Departments',
  components: {
    TreeNode,
    AddDept
  },
  data() {
    return {
      departments: [],
      company: {
        name: '',
        manager: '负责人'
      },
      loading: false,
      showDialog: false,
      currentNode: {}
    }
  },
  created() {
    this.getDeptList()
  },
  methods: {
    async getDeptList() {
      this.loading = true
      const res = await getDept()
      this.departments = list2Tree(res.depts)
      this.company.name = res.companyName
      this.loading = false
    },
    addDept(nodeData) {
      this.showDialog = true
      this.currentNode = nodeData
    }
  }
}
</script>

<style scoped lang="scss">
.el-tabs {
  padding: 20px 40px;
  .tree-card {
    padding: 30px 100px;
    font-size: 14px;
  }
  ::v-deep {
    .el-tree-node {
      padding: 5px 0;
    }
  }
}
</style>
